<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="mb-10">
        <div class="toplineBox">
          <div class="toplineBox-left">
            <el-button size="small" @click="addStudent()" type="primary"><i class="el-icon-plus"></i>添加角色</el-button>
            <el-button size="small" @click="refreshFn()">刷新</el-button>
          </div>
          <p class="numberline toplineBox-right">总{{page.total}}条</p>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
                  ref="multipleTable"
                  :data="arryList"
                  :stripe="tableStyle.tableStripe"
                  :border="tableStyle.tableBorder"
                  tooltip-effect="dark"
                  style="width: 100%"
                  header-cell-class-name="table-text-c"
                  cell-class-name="table-text-c"
          >
<!--            <el-table-column-->
<!--                prop="id"-->
<!--                label="ID">-->
<!--            </el-table-column>-->
            <el-table-column
                    prop="name"
                    label="角色名称">
            </el-table-column>
            <el-table-column
                    label="角色说明">
              <template slot-scope="scope">
                <span v-if="scope.row.remark">{{scope.row.remark}}</span>
                <span v-else>未说明</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="addStudent(scope.row.id)" plain>详情</el-button>
                <el-button size="small" @click="detelFn(scope.row.id,scope.$index)" type="danger" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
                background
                layout="total, prev, pager, next"
                :total="page.total"
                :page-size="page.pagesize"
                @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <roleDetail :visible.sync="detailVisible" :editId="editId"></roleDetail>
  </div>
</template>

<script>
  import changeCart from '@/components/dialog/changeCart.vue'
  import {pagination, tableoption} from '@/utils/util.js'
  import roleDetail from "./components/roleDetail";

  export default {
    components: {
      changeCart,
      roleDetail
    },
    data () {
      return {
        arryList: [],
        handleSelection: [],
        // 设置table样式
        tableStyle: tableoption,
        // 设置table页面分页所需
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        detailVisible: false,
        editId: 0
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        this.$fetch(this.api.admin_role_index, {
          p: this.page.pageindex
        }).then((response) => {
          if (response.code === 0) {
            this.arryList = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      checkIdCard () {
        this.changeCartVisible = true
      },
      handleSelectionChange (val) {
        this.handleSelection = val
      },
      // 分页
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      // 刷新页面
      refreshFn () {
        this.page.pageindex = 1
        this.InitFn()
      },
      addStudent (option) {
        this.editId = option || 0
        this.detailVisible = true
      },
      detelFn (id, index) {
        let self_ = this
        this.$confirm('此角色将永久删除，该角色的用户将不再受此角色权限限制，确认删除此角色？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self_.$post(this.api.admin_role_detel, {
            id: id
          }).then((response) => {
            if (response.code === 0) {
              this.arryList.splice(index, 1)
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            } else {
              this.$message.error(response.msg)
            }
          }).catch((err) => {
            console.log(err)
          })
        }).catch(() => {

        })
      }
    },
    mounted () {
    }
  }
</script>
